import React from 'react';
import { Card, Statistic, Row, Col } from 'antd';
import { FileTextOutlined, DollarOutlined } from '@ant-design/icons';
// import './App.css';

export default function Home() {
  return (
      <div>
        <div className="site-layout-content">
          <Row gutter={16}>
            <Col span={8}>
              <Card className="card-header" title="协作人员">
                <p>杜晨阳 21301006</p>
                <p>廖思瑜 21301098</p>
                <p>宿嘉璐 21301104</p>
                <p>燕宇菲 21301112</p>
                <p>杨亚菲 21301023</p>
              </Card>
            </Col>
            <Col span={8}>
              <Card className="card-header" title="项目">
                <p>这里是商品管理系统后台的首页</p>
              </Card>
            </Col>
            <Col span={8}>
              <Card className="card-header" title="学习教程">
                <p>学习教程查看README文档</p>
              </Card>
            </Col>
          </Row>
          <Row gutter={16} style={{ marginTop: 16 }}>
            <Col span={8}>
              <Card>
                <Statistic
                    title="今日订单总数"
                    value={200}
                    prefix={<FileTextOutlined style={{ color: '#ff5e62', fontSize: '32px' }} />}
                />
              </Card>
            </Col>
            <Col span={8}>
              <Card>
                <Statistic
                    title="今日销售总额"
                    value={'￥5,000'}
                    prefix={<DollarOutlined style={{ color: '#ff5e62', fontSize: '32px' }} />}
                />
              </Card>
            </Col>
            <Col span={8}>
              <Card>
                <Statistic
                    title="昨日销售总额"
                    value={'￥5,000'}
                    prefix={<DollarOutlined style={{ color: '#ff5e62', fontSize: '32px' }} />}
                />
              </Card>
            </Col>
          </Row>

          <Row gutter={16} style={{ marginTop: 16, textAlign: 'center'}}>
            <Col span={24}>
              <Card title="待处理事务" bordered={false}>
                <Row>
                  <Col span={8}>
                    <p>待付款订单</p>
                    <p style={{ color: 'red' }}>10</p>
                  </Col>
                  <Col span={8}>
                    <p>已完成订单</p>
                    <p style={{ color: 'red' }}>10</p>
                  </Col>
                  <Col span={8}>
                    <p>待确认收货订单</p>
                    <p style={{ color: 'red' }}>10</p>
                  </Col>
                </Row>
                <Row>
                  <Col span={8}>
                    <p>待发货订单</p>
                    <p style={{ color: 'red' }}>10</p>
                  </Col>
                  <Col span={8}>
                    <p>新缺货登记</p>
                    <p style={{ color: 'red' }}>10</p>
                  </Col>
                  <Col span={8}>
                    <p>待处理退款申请</p>
                    <p style={{ color: 'red' }}>10</p>
                  </Col>
                </Row>
                <Row>
                  <Col span={8}>
                    <p>已发货订单</p>
                    <p style={{ color: 'red' }}>10</p>
                  </Col>
                  <Col span={8}>
                    <p>待处理退货订单</p>
                    <p style={{ color: 'red' }}>10</p>
                  </Col>
                  <Col span={8}>
                    <p>广告位即将到期</p>
                    <p style={{ color: 'red' }}>10</p>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
          <Row gutter={16} style={{ marginTop: 16 }}>
            <Col span={12}>
              <Card title="商品总览" bordered={false} style={{ fontSize:'28px', fontWeight:'bold'}}>
                <Row>
                  <Col span={6} style={{ textAlign: 'center' }}>
                    <p>已下架</p>
                    <p style={{ color: '#ff5e62' }}>100</p>
                  </Col>
                  <Col span={6} style={{ textAlign: 'center' }}>
                    <p>已上架</p>
                    <p style={{ color: '#ff5e62' }}>400</p>
                  </Col>
                  <Col span={6} style={{ textAlign: 'center' }}>
                    <p>库存紧张</p>
                    <p style={{ color: '#ff5e62' }}>50</p>
                  </Col>
                  <Col span={6} style={{ textAlign: 'center' }}>
                    <p>全部商品</p>
                    <p style={{ color: '#ff5e62' }}>500</p>
                  </Col>
                </Row>
              </Card>
            </Col>
            <Col span={12}>
              <Card title="用户总览" bordered={false} style={{ fontSize:'28px', fontWeight:'bold'}}>
                <Row >
                  <Col span={6} style={{ textAlign: 'center' }}>
                    <p>今日新增</p>
                    <p style={{ color: '#ff5e62' }}>100</p>
                  </Col>
                  <Col span={6} style={{ textAlign: 'center' }}>
                    <p>昨日新增</p>
                    <p style={{ color: '#ff5e62' }}>200</p>
                  </Col>
                  <Col span={6} style={{ textAlign: 'center' }}>
                    <p>本月新增</p>
                    <p style={{ color: '#ff5e62' }}>1000</p>
                  </Col>
                  <Col span={6} style={{ textAlign: 'center' }}>
                    <p>会员总数</p>
                    <p style={{ color: '#ff5e62' }}>5000</p>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
        </div>
      </div>
  );
}
